<template>
	<page  top='100rpx'>
		<!-- 邀请入驻 wwl -->
		<view class="page">
			<view class="tabber_box">
				<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
				<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			</view>
			<view class="tabber_box_title_static">
			</view>
			<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
				<!-- #ifndef  MP-WEIXIN --> 
				<view class="right" @click="onAuditDetails()">
					<text>审核明细</text>
				</view>
				<!-- #endif -->
				<view class="left" @click="onBack()">
					<n-icon name="back" size="40" color='#000'></n-icon>
				</view>
				<view class="text">
					邀请入驻
				</view>
			</view>
			<!-- #ifdef  MP-WEIXIN -->
			<view class="detailed" @click="onAuditDetails()">
				<text>审核明细</text>
			</view>
			<!-- #endif -->
			<!-- info -->
			<view class="info">
				 <picker @change="changeIdentity"  range-key='name' :value='identityList.findIndex(x=>x.id == info.identity) == -1 ? null : identityList.findIndex(x=>x.id == info.identity)' :range="identityList" >
					 <view class="info_row">
						<text class="left">选择身份</text>
						<view class="right">
							<text class="right_text1" v-if="info.identity">{{info.identityName}}</text>
							<text class="right_text2" v-else>请选择身份</text>
						</view>
					 </view>
				 </picker>
				<cityOptions @change='changeCity' v-if='userInfo.type == 3'>
					 <template slot="info">
					   <view class="info_row">
						<text class="left">请选择地区</text>
						<view class="right">
							<text class="right_text1" v-if="info.region">{{info.regionName}}</text>
							<text class="right_text2" v-else>请选择地址</text>
							<n-icon name="right" size="32" color='#d5d5d5' style='margin-left: 5rpx;'></n-icon>
						</view>
					   </view>
					</template>
				</cityOptions>
				<view class="info_row" v-else>
					<text class="left">地区</text>
					<view class="right">
						<text class="right_text1" v-if="info.region">{{info.regionName}}</text>
					</view>
				</view>
				 <view class="info_row">
					<text class="left">姓名</text>
					<input type="text" v-model="info.name" maxlength="10" class="right_input"  placeholder="请输入真实姓名"  placeholder-style	="color:#999999;font-size:28rpx"/>
				 </view>
				 <view class="info_row">
					<text class="left">联系电话</text>
					<input type="text" maxlength="30" v-model="info.phone" class="right_input"  placeholder="请输入联系电话" placeholder-style="color:#999999;font-size:28rpx"/>
				 </view>
			</view>
			<!-- open-type="share" -->
			<button  class="button_box" @click='onSave()'  :loading='saveLoading'>邀请入驻</button>
			<!-- <button  class="button_box" @click='onSave()' open-type="share">邀请入驻</button> -->
			<u-popup v-model="visible" mode='center' width="80%" height="auto" >
				<view class="reject_popup">
					<view class="title">
						<text class="title_text" >提示</text>
						<view  class="icon" @click='visible = false'>
							<n-icon name="close" size="38" color="#666"></n-icon>
						</view>
					</view>
					<button class="btn" open-type="share">去邀请好友</button>
				</view>
			</u-popup>
		</view>
	</page>
</template>

<script>
	import {mapState} from 'vuex'
	import uPopup from "@/components/u-popup.vue"
	import cityOptions from '@/components/cityOptions.vue'
	import { setRoleList,setInvite,getZoneName} from '../static/api.js'
	export default{
		components:{cityOptions,uPopup},
		data(){
			return{
				isRegions:false,
				visible:false,
				saveLoading:false,
				info:{
					identityName:null,
					identity:null,
					identityImg:null,
					region:null,
					regionName:null,
					name:null,
					phone:null,
				},
				userInfo:null,
				// infoUrl:null,
				identityList:[],
				shareId:null,
				shareName:'',
			}
		},
		onShareAppMessage(res) {
			// this.shareImg = this.shareImgList.find(x=>x.id == this.info.identity) ?  this.shareImgList.find(x=>x.id == this.info.identity).img : ''
			this.shareName = this.info.identityName
			this.info.identityName = null
			this.info.identity = null
			this.info.name = null
			this.info.phone = null
			if(this.userInfo.type == 3){
				this.info.region = null
				this.info.regionName = null
			}
			this.visible = false
			// console.log('/pagesOther/invitation/invitation?id=' + this.shareId + '&invitation_code=' + this.userInfo.invitation_code )
			return {
				title: `图装平台邀请您成为${this.shareName}`,
				path: '/pagesOther/invitation/invitation?id=' + this.shareId + '&invitation_code=' + this.userInfo.invitation_code ,
				imageUrl:this.info.identityImg,
			};
		},
		methods:{
			onBack() {
				uni.navigateBack()
			},
			changeCity(e) {
				this.info.regionName = e.name
				this.info.region = e.code[e.code.length - 1]
			},
			onAuditDetails(){
				uni.navigateTo({
					url:"/pagesMy/inviteIn/auditDetails"
				})
			},
			async onSave(){
				if(this.saveLoading) return
				if(!this.info.identity) return uni.showToast({title:'请选择身份',icon:'none'})
				if(!this.info.region) return uni.showToast({title:'请选择地区',icon:'none'})
				if(!this.info.name) return uni.showToast({title:'请输入真实姓名',icon:'none'})
				// if(!this.info.phone) return uni.showToast({title:'请输入联系电话',icon:'none'})
				if (!this.$regular.funShowToast('phone', this.info.phone , '请输入联系电话！')) return false
				this.saveLoading = true
				try{
					var res = await setInvite({
						zone_id:this.info.region,
						user_role_id:this.info.identity,
						name:this.info.name,
						phone:this.info.phone
					})
					this.shareId = res.id
					this.saveLoading = false
					if(this.duanType == 1){
						this.onShareApp()
					}else{
						this.visible = true
					}
				}catch{
					this.saveLoading = false
				}
			},
			onShareApp(){
				this.shareName = this.info.identityName
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 5,
					imageUrl:this.info.identityImg,
					miniProgram:{
						id:this.$global.originalId,
						path:'pagesOther/invitation/invitation?id=' + this.shareId + '&invitation_code=' + this.userInfo.invitation_code ,
						type:this.$global.environment == 'development' ? 2 : 0,
						webUrl:"https://www.baidu.com"
					},
				    title:  `图装平台邀请您成为${this.shareName}`,
				    success:  (res) =>{
						uni.showToast({title:'分享成功'})
				        this.info.identityName = null
				        this.info.identity = null
				        this.info.name = null
				        this.info.phone = null
				        if(this.userInfo.type == 3){
				        	this.info.region = null
				        	this.info.regionName = null
				        }
				    },
				    fail: function (err) {
				       // console.log(JSON.stringify(err))
				    }
				});
			},
			changeIdentity(e){
				this.info.identityName = this.identityList[e.detail.value].name
				this.info.identity = this.identityList[e.detail.value].id
				this.info.identityImg = this.identityList[e.detail.value].img
			},
			async getRole(){
				try{
					var res = await setRoleList()
					this.identityList = res
				}catch{}
				
			},
			async getCityName(zone_id){
				try{
					var res = await getZoneName({zone_id})
					this.info.regionName = res
					this.info.region = zone_id
				}catch{
					
				}
				
			}
		},
		computed: {
			...mapState(['duanType'])
		},
		onLoad(params){
			this.userInfo = this.$store.getters.userInfo
			this.getRole()
			this.getCityName(this.userInfo.zone_id)
		},
	}
</script>

<style lang="scss" scoped>
	.tabber_box .tabber_box_static {
		width: 100%;
		background-color: #fff;
	}
	
	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	
	.tabber_box_title_static {
		height: 130rpx;
		width: 100%;
		background-color: #fff;
	}	
	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
		height: 130rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		// font-weight: 600;
		text-align: center;
		color: #26252B;
		.right {
			position: absolute;
			right: 38rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 26rpx;
			color:#26252A;
			z-index: 9;
		}
		.left {
			position: absolute;
			left: 38rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 9;
		}
	}
	.info{
		padding: 0 38rpx;
		box-sizing: border-box;
		.info_row{
			padding:30rpx 0 ;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #EBEBEF;
			.left{
				width: 5em;
				color:#26252A;
				line-height: 38rpx;
			}
			.right{
				width: calc(100% - 6em);
				text-align: right;
			}
			.right_input{
				width: calc(100% - 6em);
				text-align: right;
				color:#26252A;
				line-height: 38rpx;
			}
			.right_text1{
				color:#26252A;
				line-height: 38rpx;
			}
			.right_text2{
				color:#999999;
				line-height: 38rpx;
			}
		}
	}
	.button_box{
		position: fixed;
		bottom: 80rpx;
		width: 674rpx;
		left: 38rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(270deg,#ff7a1f, #ff9760);
		border-radius: 16rpx;
		color:#FFFFFF;
		font-size: 24rpx;
	}
	.detailed{
		width: 100%;
		padding: 0 38rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color:$theme;
		text-align: right;
	}
	.reject_popup{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 30rpx  60rpx;
		width: 100%;
		box-sizing: border-box;
		.title{
			height: 60rpx;
			line-height: 60rpx;
			padding: 30rpx;
			text-align: center;
			position: relative;
			.title_text{
				font-size: 34rpx;
			}
			.icon{
				position: absolute;
				right: 20rpx;
				top:0%;
			}
		}
		.text{
			width: 100%;
			box-sizing: border-box;
			// border:2rpx solid #ebebef;
			font-size: 26rpx;
			padding: 20rpx;
			color:#333;
			max-height: 100rpx;
			line-height: 32rpx;
			
		}
		.btn{
			margin-top: 30rpx;
			width: 80%;
			height: 70rpx;
			line-height: 68rpx;
			// background: #ffffff;
			background-color: $theme;
			// border: 2rpx solid #d5d5d5;
			border-radius: 8rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
	
</style>
